// import React from 'react'
import ReactDOM from 'react-dom/client'
// 确保样式覆盖的顺序
// 初始化样式放在最前
import 'reset-css'
// 框架的样式

// 全局样式 全局引入
import './assets/styles/global.scss'

// 组件的样式 
import App from './App.tsx'
// 路由器 BrowserRouter history模式 HashRouter hash模式
import { BrowserRouter } from 'react-router-dom'

// 引入react-redux的Provider
import { Provider } from 'react-redux'
// 引入仓库
import store from './store/index.ts'

// 18.0之后使用了createRoot api后，所有setState都是异步批量执行的。使用 createRoot 来启用并发特性，而不是传统的 ReactDOM.render。
// createRoot：方法用于创建一个 根根节点，该根节点支持并发渲染。 
// 这个方法接受一个 DOM 节点作为参数，通常是通过 document.getElementById('root') 获取的。
ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
)

/**
 * render 函数是 createRoot 创建的根节点上的一个方法，
 * 它接受一个 React 组件作为参数，并将该组件渲染到指定的 DOM 节点中。root.render(<YourComponent />);
 * render 函数中传入的组件树可以包含多个层次的组件
 * 
 * Provider: 这是 Redux 的 Provider 组件，它允许 React 组件访问 Redux store。
 * BrowserRouter: 这是 React Router 提供的组件，用于在应用中启用路由功能。
 * App: 这是你的主应用组件。
 * 
 * 并发特性：React 18 的 createRoot 和 render 方法引入了新的并发渲染模式，使得 React 在处理大量状态更新和渲染时更加高效。

   更新机制：render 函数会根据状态或属性的变化重新渲染组件树。当组件状态或属性发生变化时，React 会重新调用 render 方法以更新 UI。

   清理与卸载：使用 createRoot 的根节点可以很方便地进行卸载和清理，确保不会导致内存泄漏。
 */
